<template>
  <div class="MySubordinates">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <h3 class="MySubordinates_title">我的下级</h3> -->
      <ul v-if="subordinatesList.length > 0">
        <li
          class="MySubordinates_item"
          v-for="(item, index) in subordinatesList"
          :key="index"
        >
          <van-row>
            <van-col span="6">
              <img :src="item.headImg" />
            </van-col>
            <van-col span="18">
              <div class="MySubordinates_item_name">
                <h3>{{ item.nickname }}</h3>
                <p>{{ $common.getExactTime(item.createTime) }}</p>
              </div>
            </van-col>
          </van-row>
        </li>
      </ul>
      <van-empty v-else />
    </van-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Col, Row, List ,Empty} from "vant";
Vue.use(Empty);
Vue.use(List);
Vue.use(Col);
Vue.use(Row);
@Component({})
export default class MySubordinates extends Vue {
  private subordinatesList: number[] = [];
  private form = {
    page: 1,
    size: 20,
  };
  private loading: boolean = false;
  private finished: boolean = false;
  private onLoad() {
    this.$common.getAuthToken(this.getData);
  }
  private getData() {
    this.$post(`subordinateList`, this.form).then((res: any) => {
      if (res.code == 0) {
        this.loading = false;
        this.subordinatesList = this.subordinatesList.concat(res.data.list);
        this.form.page += 1;
        if (res.data.list.length < 20 || res.data.list == null) {
          this.finished = true;
        }
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.MySubordinates {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  // .MySubordinates_title {
  //   font-size: 35px;
  //   line-height: 1.5;
  //   box-sizing: border-box;
  //   font-weight: normal;
  // }
  ul {
    list-style: none;
    width: 100%;
    .MySubordinates_item {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fff;
      margin-bottom: 20px;
      img {
        width: 100%;
        height: 110px;
        display: block;
        border-radius: 10px;
      }
      .MySubordinates_item_name {
        width: 100%;
        padding-left: 20px;
        box-sizing: border-box;
        & > h3 {
          font-size: 30px;
          font-weight: 400;
          color: #000000;
          line-height: 2;
        }
        & > p {
          font-size: 24px;
          font-weight: 300;
          color: #343434;
          line-height: 2;
        }
      }
    }
  }
}
</style>
